<template>
  <div class="page-box h100 display-flex czbj">
    <n-form inline size="normal">
      <n-form-item>
        <n-button
          type="info"
          size="medium"
          class="ml10"
          @click="newForm"
          v-permission="'tjxxmenuManagementxz'"
          >+新增</n-button
        >
        <n-button
          type="error"
          size="medium"
          class="ml10"
          @click="topDel"
          v-permission="'tjxxmenuManagementdel'"
          :disabled="pitchOn.length > 0 ? false : true"
          >删除</n-button
        >
      </n-form-item>
    </n-form>
    <n-data-table
      :columns="columns"
      :data="Tabledata"
      :row-key="rowKey"
      @update:checked-row-keys="handleCheck"
      class="mt10"
    />

    <n-modal v-model:show="showModal" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>{{ Addedit == 0 ? "新增" : "编辑" }}菜单</div>
      </template>
      <div class="pl10">
        <n-tabs type="line" @update:value="dfdfdtrtr">
    <n-tab name="1">动态 </n-tab>
    <n-tab name="2">静态</n-tab>
  </n-tabs>


        <n-form
          ref="formRef"
          label-placement="left"
          label-width="120px"
          require-mark-placement="right-hanging"
          size="medium"
          :model="form"
          :rules="rules"
        >
          <n-grid :cols="24" :x-gap="20">
            <n-form-item-gi :span="12" label="标题" path="title" class="mt20">
              <n-input placeholder="请输入标题" v-model:value="form.title" />
            </n-form-item-gi>
            <n-form-item-gi
              :span="12"
              label="链接地址"
              class="mt20"
              v-if="form.parentMenuCode != '0'"
            >
            <n-input
                placeholder="请输入链接地址"
                v-model:value="form.chainedAddress"
                v-if="kjjnse==2"
              /> 
              <n-select
              v-else
                :options="store.state.routerList"
                v-model:value="form.chainedAddress"
                filterable
                @change="jhhjsert"
              />
            </n-form-item-gi>
            <n-form-item-gi :span="24" label="父级菜单">
              <n-select
              filterable
                :options="Arratlist"
                v-model:value="form.parentMenuCode"
              />
            </n-form-item-gi>
            <n-form-item-gi
              :span="12"
              label="是否为菜单"
              v-if="form.parentMenuCode != '0'"
            >
              <div class="radio-context">
                <n-radio-group v-model:value="form.MenuOrNot" name="radiogroup">
                  <n-radio value="1" name="是" @change="handleChange">
                    是
                  </n-radio>

                  <n-radio value="2" name="否" @change="handleChange">
                    否
                  </n-radio>
                </n-radio-group>
              </div>
            </n-form-item-gi>
            <n-form-item-gi
              :span="8"
              label="图标"
              v-if="form.parentMenuCode == '0'"
            >
              <n-button type="primary" size="medium" @click="iconPup = true">
                <i
                  class="iconfont fz30"
                  :class="form.icon"
                  v-if="form.icon"
                ></i>
                <span v-else>点击选择图标</span>
              </n-button>
            </n-form-item-gi>
            <n-form-item-gi
              :span="16"
              label="页面权限"
              path="PagePermissionIdentification"
            >
              <n-input
                placeholder="请输入页面权限标识"
                @input="PagePermissionIdentificationInput"
                v-model:value="form.PagePermissionIdentification"
              />
            </n-form-item-gi>
            <n-form-item-gi
              :span="12"
              label="查看权限标识"
              v-if="form.parentMenuCode != '0'"
            >
              <n-input
                placeholder="请输入查看权限标识"
                v-model:value="form.ViewPermissionID"
              />
            </n-form-item-gi>
            <n-form-item-gi
              :span="12"
              label="编辑权限标识"
              v-if="form.parentMenuCode != '0'"
            >
              <n-input
                placeholder="请输入编辑权限标识"
                v-model:value="form.EditPermissionIdentifier"
              />
            </n-form-item-gi>
            <n-form-item-gi
              :span="12"
              label="删除权限标识"
              v-if="form.parentMenuCode != '0'"
            >
              <n-input
                placeholder="请输入删除权限标识"
                v-model:value="form.DeletePermissionID"
              />
            </n-form-item-gi>
            <n-form-item-gi
              :span="12"
              label="新增权限标识"
              v-if="form.parentMenuCode != '0'"
            >
              <n-input
                placeholder="请输入新增权限标识"
                v-model:value="form.NewPermissionIdentifier"
              />
            </n-form-item-gi>

            <n-form-item-gi :span="12" label="排序">
              <n-input
                placeholder="请输入排序"
                v-model:value="form.menuIindex"
              />
            </n-form-item-gi>
          </n-grid>
        </n-form>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="addConfirm">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="iconPup" preset="card" class="Stock-diagnosis">
      <template #header>
        <div>选择图标</div>
      </template>
      <n-grid x-gap="12" :cols="6">
        <n-gi v-for="(item, idx) in iconData" :key="idx">
          <div
            class="iconBox vertical-center"
            @click="
              form.icon = item;
              iconPup = false;
            "
          >
            <i class="iconfont fz20" :class="item"></i>
          </div>
        </n-gi>
      </n-grid>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import {
  dxget,
  dialog,
  dxdel,
  iconData,
  dxpost,
  routeSwitch,
} from "../../../util/index";
import { ref, h } from "vue";
import comp from "../../../components/index";
import { NButton } from "naive-ui";
import store from "../../../store";
const showModal = ref(false);
const iconPup = ref(false);
const formRef = ref(null);
const Addedit = ref(0); //0新增 1编辑
const pitchOn = ref([]);
let dataLength = 0;
const kjjnse =ref(1)
const dfdfdtrtr = (data)=>{
  console.log(data);
  kjjnse.value = data
}
const columns = [
  {
    type: "selection",
  },
  {
    title: "菜单标题",
    width: "200",
    key: "title",
  },
  {
    title: "图标",
    width: "80",
    key: "icon",
    align: "center",
    render(row) {
      return h("i", { class: "iconfont fz20 " + row.icon });
    },
  },
  {
    title: "页面路径",
    width: "200",
    key: "chainedAddress",
  },
  {
    title: "权限标识",

    key: "PagePermissionIdentification",
    render(row) {
      return h(comp.permissions, { row });
    },
  },
  {
    title: "排序",
    width: "140",
    render(row, idx) {
      return [
        h("i", {
          class: "iconfont fz20 jhhghsa dx-toleft",
          onClick: () => {
            console.log(idx);
          },
        }),
        h("i", { class: "iconfont fz20 jhhghsb dx-toleft" }),
      ];
    },
  },
  {
    title: "操作",
    width: "140",
    align: "center",
    render(row) {
      const arr = localStorage.rolemanagement.split(",");
      const czBtn = [];
      if (arr.filter((a) => a == "tjxxmenuManagementbj")[0]) {
        czBtn.push(
          h(
            NButton,
            {
              type: "info",
              quaternary: true,
              onClick: () => {
                Addedit.value = 1;
                showModal.value = true;
                form.value = JSON.parse(JSON.stringify(row));
              },
            },
            "编辑"
          )
        );
      }
      if (arr.filter((a) => a == "tjxxmenuManagementdel")[0]) {
        czBtn.push(
          h(
            NButton,
            {
              type: "error",
              quaternary: true,
              onClick: async () => {
                delUser(row.id);
              },
            },
            "删除"
          )
        );
      }

      return czBtn;
    },
  },
];
const rules = {
  title: {
    required: true,
    message: "请输入标题",
  },
  PagePermissionIdentification: {
    required: true,
    message: "请输入页面权限标识",
  },
};
const Tabledata = ref([]);
const formData = {
  title: "", //标题
  chainedAddress: "", //链接地址
  parentMenu: "", //父级菜单
  parentMenuCode: "0", // 父级菜单code
  MenuOrNot: "1", //是否为菜单
  icon: "", //图标
  PagePermissionIdentification: "", //页面权限标识
  ViewPermissionID: "", // 查看权限标识
  EditPermissionIdentifier: "", // 编辑权限标识
  DeletePermissionID: "", // 删除权限标识
  NewPermissionIdentifier: "", // 新增权限标识
  menuIindex: 0,
};
const form = ref(formData);
const rowKey = (row) => row.id;
const handleCheck = (data) => {
  console.log(data);
  pitchOn.value = data;
};
const Arratlist = ref([
  {
    label: "顶级菜单",
    type: 0,
    value: "0",
  },
]);
const topDel = () => {
  delUser(pitchOn.value.join(","));
  pitchOn.value = [];
};
// 删除
const delUser = async (id) => {
  let statics: any = await dialog("此操作将永久删除, 是否继续?");
  if (statics == 1) {
    let { errno }: any = await dxdel("tjxx/menumg/menumg", {
      id,
    });
    if (errno == 0) {
      window.$message.success("删除成功！");
      initData();
    }
  }
};
const PagePermissionIdentificationInput = (data) => {
  form.value.ViewPermissionID = data + "ck";
  form.value.EditPermissionIdentifier = data + "bj";
  form.value.DeletePermissionID = data + "del";
  form.value.NewPermissionIdentifier = data + "xz";
};
const initData = async () => {
  const { data }: any = await dxget("tjxx/menumg/menumg");
  Arratlist.value = [
    {
      label: "顶级菜单",
      type: 0,
      value: "0",
    },
  ];

  dataLength = data.length;
  data.map((a) => {
    let obj: any = {};
    obj.label = a.title;
    obj.value = "" + a.id;
    obj.type = 1;
    if (a.parentMenuCode == 0) {
      Arratlist.value.push(obj);
    }
  });
  Tabledata.value = routeSwitch(data);
};
initData();

const handleChange = (data) => {
  console.log(data);
};

// 新增
const newForm = () => {
  Addedit.value = 0;
  showModal.value = true;
  form.value = JSON.parse(JSON.stringify(formData));
  form.value.menuIindex = dataLength;
};

// 新增
const addConfirm = async () => {
  //   formRef.value.reset;

  formRef.value.validate(async (errors) => {
    if (!errors) {
      let { errno }: any = await dxpost(
        "tjxx/menumg/menumg",
        form.value,
        Addedit.value == 0 ? "POST" : "PUT"
      );
      if (errno == 0) {
        window.$message.success("操作成功！");
        showModal.value = false;
        initData();
      }
    } else {
      console.log(errors);
    }
  });


};

  const jhhjsert = (data)=>{
   const jjnse =  store.state.routerList.filter(a=>a.value==data)[0]
   
   form.value.title = jjnse.label
   form.value.PagePermissionIdentification = jjnse.name
   PagePermissionIdentificationInput(jjnse.name)
  }
</script>
 <style scoped>
.radio-context {
  position: relative;
  top: 6px;
}
.iconBox {
  height: 50px;
  cursor: pointer;
}
.iconBox:hover {
  background: #f8f8f8;
}
</style>